import React, {Component} from 'react';
import {Dialog, Button, Form, Input, Field, Tab} from '@icedesign/base';
import {NameMap} from './SearchTable'
import {Overlay} from '@alifd/next';

const {Popup} = Overlay;

const FormItem = Form.Item;

// export default class EditDialog extends Component {
//   static displayName = 'EditDialog';
//
//   static defaultProps = {};
//
//   constructor(props) {
//     super(props);
//     this.state = {
//       visible: false,
//       dataIndex: null,
//     };
//     this.field = new Field(this);
//   }
//
//   handleSubmit = () => {
//     this.field.validate((errors, values) => {
//       if (errors) {
//         console.log('Errors in form!!!');
//         return;
//       }
//
//       const { dataIndex } = this.state;
//       console.log(values)
//       this.props.updateFormValues(values); // 这是返回上级组件
//       this.setState({
//         visible: false,
//       });
//     });
//   };
//
//   onOpen = (index, record) => {
//     this.field.setValues({ ...record });
//
//     this.setState({
//       visible: true,
//       dataIndex: index,
//     });
//   };
//
//   onClose = () => {
//     this.setState({
//       visible: false,
//     });
//   };
//
//   render() {
//     const init = this.field.init;
//     const { index, record } = this.props;
//     const formItemLayout = {
//       labelCol: {
//         fixedSpan: 6,
//       },
//       wrapperCol: {
//         span: 14,
//       },
//     };
//
//     // console.log(record)
//     // console.log(typeof NameMap)
//     let result = []
//     for (let [key1,value] of Object.entries(record)) {
//       if (NameMap.hasOwnProperty(key1)){
//         result.push(
//           <FormItem key={key1} label={NameMap[key1]} {...formItemLayout}>
//             <Input
//                    {...init(key1, {
//                      rules: [{ required: true, message: '必填选项' }],
//                    })}
//             />
//           </FormItem>
//         )
//       }
//
//     }
//
//     return (
//       <div style={styles.editDialog}>
//         <Button
//           size="small"
//           type="primary"
//           onClick={() => this.onOpen(index, record)}
//         >
//           编辑
//         </Button>
//         <Dialog
//           style={{ width: 640 }}
//           visible={this.state.visible}
//           onOk={this.handleSubmit}
//           closable="esc,mask,close"
//           onCancel={this.onClose}
//           onClose={this.onClose}
//           title="编辑"
//         >
//           <Form direction="ver" field={this.field}>
//             {result}
//           </Form>
//         </Dialog>
//       </div>
//     );
//   }
// }

export default class EditDialog extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: false
    };
  }

  onVisibleChange = visible => {
    this.setState({
      visible
    });
  }

  render() {
    const formItemLayout = {
      labelCol: {
        fixedSpan: 6,
      },
      wrapperCol: {
        span: 14,
      },
    };
    const {index, record} = this.props
    let result = []
    for (let [key1, value] of Object.entries(record)) {
      if (NameMap.hasOwnProperty(key1)) {
        result.push(
          <span key={key1} className="overlay-demo">
                    key:{key1},value:{value}
                    </span>
        )
      }
    }

    return (
      <Popup trigger={<button>Open</button>}
             triggerType="click"
             visible={this.state.visible}
             onVisibleChange={this.onVisibleChange}>
        <div>
          {result}
        </div>
      </Popup>
    );
  }
}


const styles = {
  editDialog: {
    display: 'inline-block',
    marginRight: '5px',
  },
};
